import React, { Component } from 'react'
// import propTypes from 'prop-types'
import { withRouter } from 'react-router-dom'
import { TabBar } from 'antd-mobile'
const Item = TabBar.Item
class NavFooter extends Component {
  constructor(props) {
    super(props)
    this.state = {}
  }
  render() {
    const navList = this.props.navList.filter(nav => !nav.hide)
    const { pathname } = this.props.location
    return (
      <TabBar>
        {navList.map((nav, index) => (
          <Item
            key={nav.path}
            title={nav.text}
            icon={{ uri: require(`./../../assets/nav/${nav.icon}.png`) }}
            selectedIcon={{
              uri: require(`./../../assets/nav/${nav.icon}-selected.png`)
            }}
            selected={pathname === nav.path}
            onPress={() => {
              this.props.history.replace(nav.path)
            }}
          />
        ))}
      </TabBar>
    )
  }
}

export default withRouter(NavFooter)
